Mestre skjermorientering: En omfattende guide til håndtering av enhetsrotasjon

I dagens verden med flere enheter er det avgjørende å håndtere skjermorientering på en elegant måte for å gi en positiv brukeropplevelse. Enten det er en smarttelefon, et nettbrett eller til og med en sammenleggbar enhet, forventer brukere at applikasjoner tilpasser seg sømløst når de roterer enheten sin. Denne guiden gir en omfattende oversikt over håndtering av enhetsrotasjon, og dekker ulike plattformer og teknikker for å sikre at applikasjonene dine er responsive og brukervennlige.

Forståelse av skjermorientering

Skjermorientering refererer til retningen innholdet vises i på en enhets skjerm. De to primære orienteringene er:

• Portrett: Skjermen er høyere enn den er bred. Dette er den typiske orienteringen for smarttelefoner.
• Landskap: Skjermen er bredere enn den er høy. Dette foretrekkes ofte for å se videoer eller spille spill.

Noen enheter og applikasjoner støtter også:

• Omvendt portrett: Portrettorientering med enheten rotert 180 grader.
• Omvendt landskap: Landskapsorientering med enheten rotert 180 grader.

Hvorfor håndtere endringer i skjermorientering?

Å ikke håndtere endringer i skjermorientering kan føre til en rekke problemer, inkludert:

• Layoutproblemer: Elementer kan bli feiljustert, avkortet eller overlappe hverandre.
• Tap av data: I noen tilfeller kan aktivitetens eller applikasjonens tilstand gå tapt når skjermen roterer.
• Dårlig brukeropplevelse: En brå eller ødelagt opplevelse kan frustrere brukere og skade applikasjonens omdømme.
• Ytelsesproblemer: Hyppig re-rendring og layoutberegninger kan påvirke ytelsen, spesielt på eldre enheter.

Håndtering av skjermorientering på forskjellige plattformer

De spesifikke teknikkene for å håndtere skjermorientering varierer avhengig av plattformen du utvikler for. La oss se på noen av de mest populære plattformene:

1. Android

Android tilbyr flere mekanismer for å håndtere endringer i skjermorientering. De vanligste tilnærmingene inkluderer:

a. Konfigurasjonsendringer

Som standard gjenoppretter Android aktiviteten (Activity) når skjermorienteringen endres. Dette betyr at onCreate()-metoden kalles på nytt, og hele layouten blir re-inflatert. Selv om dette kan være nyttig for å restrukturere brukergrensesnittet fullstendig basert på orienteringen, kan det også være ineffektivt hvis du bare trenger å justere layouten litt.

For å forhindre at aktiviteten blir gjenopprettet, kan du deklarere at aktiviteten din håndterer konfigurasjonsendringen orientation i AndroidManifest.xml-filen:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Ved å legge til orientation og screenSize (viktig for API-nivå 13 og høyere), forteller du systemet at aktiviteten din selv vil håndtere orienteringsendringer. Når skjermen roterer, vil onConfigurationChanged()-metoden bli kalt.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landskap", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrett", Toast.LENGTH_SHORT).show();
 }
}

Inne i onConfigurationChanged() kan du oppdatere brukergrensesnittet basert på den nye orienteringen. Denne tilnærmingen er mer effektiv enn å gjenopprette aktiviteten fordi den unngår unødvendig ressurslasting og layout-inflasjon.

b. Lagre og gjenopprette aktivitetstilstand

Selv om du håndterer konfigurasjonsendringen selv, kan du likevel trenge å lagre og gjenopprette aktivitetens tilstand. For eksempel, hvis aktiviteten din har et tekstfelt, vil du bevare teksten brukeren har skrevet inn når skjermen roterer.

Du kan bruke onSaveInstanceState()-metoden for å lagre aktivitetens tilstand og onRestoreInstanceState()-metoden for å gjenopprette den.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternativt kan du bruke ViewModels med SavedStateHandle for å administrere og bevare UI-relaterte data på tvers av konfigurasjonsendringer, en mer moderne og anbefalt tilnærming.

c. Alternative layouter

Android lar deg tilby forskjellige layout-filer for forskjellige skjermorienteringer. Du kan opprette separate layout-filer i katalogene res/layout-land/ og res/layout-port/. Når skjermen roterer, vil Android automatisk laste den riktige layout-filen.

Denne tilnærmingen er nyttig når brukergrensesnittet må være betydelig annerledes i landskaps- og portrettorientering. For eksempel kan du ønske å vise en to-kolonners layout i landskap og en en-kolonnes layout i portrett.

d. Bruk av ConstraintLayout

ConstraintLayout er en kraftig layout-manager som lar deg lage fleksible og adaptive layouter. Med ConstraintLayout kan du definere begrensninger som spesifiserer hvordan visninger (views) skal posisjoneres i forhold til hverandre og til foreldre-layouten. Dette gjør det enklere å lage layouter som tilpasser seg forskjellige skjermstørrelser og orienteringer.

2. iOS

iOS tilbyr også mekanismer for å håndtere endringer i skjermorientering. Her er noen vanlige tilnærminger:

a. Auto Layout

Auto Layout er et begrensningbasert layout-system som lar deg definere regler for hvordan visninger skal posisjoneres og dimensjoneres. Auto Layout-begrensninger sikrer at brukergrensesnittet ditt tilpasser seg forskjellige skjermstørrelser og orienteringer.

Når du bruker Auto Layout, definerer du vanligvis begrensninger som spesifiserer forholdet mellom visninger. For eksempel kan du begrense en knapp til å være sentrert horisontalt og vertikalt innenfor sin foreldrevisning. Når skjermen roterer, beregner Auto Layout-motoren automatisk posisjonene og størrelsene på visningene for å tilfredsstille begrensningene.

b. Størrelsesklasser (Size Classes)

Størrelsesklasser er en måte å kategorisere skjermstørrelser og orienteringer på. iOS definerer to størrelsesklasser: Compact og Regular. En enhet kan ha forskjellige størrelsesklasser for bredden og høyden. For eksempel har en iPhone i portrettorientering en Compact bredde-størrelsesklasse og en Regular høyde-størrelsesklasse. I landskap har den ofte Compact høyde og Compact eller Regular bredde avhengig av modellen.

Du kan bruke størrelsesklasser til å tilpasse brukergrensesnittet ditt basert på skjermstørrelse og orientering. For eksempel kan du ønske å vise et annet sett med visninger eller bruke forskjellige fonter for forskjellige størrelsesklasser.

Du kan konfigurere forskjellige begrensninger og til og med installere/avinstallere visninger basert på størrelsesklasser direkte i Interface Builder eller programmatisk.

c. View Controller-rotasjonsmetoder

iOS tilbyr flere metoder i UIViewController-klassen som kalles når enheten roterer:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Kalles før visningen til view controlleren endrer størrelse for en overgang.
• viewWillLayoutSubviews(): Kalles rett før visningen til view controlleren legger ut sine undervisninger.
• viewDidLayoutSubviews(): Kalles rett etter at visningen til view controlleren har lagt ut sine undervisninger.

Du kan overstyre disse metodene for å utføre egendefinerte layout-justeringer når skjermen roterer.

d. Notification Center

Du kan lytte etter varsler om orienteringsendringer ved hjelp av Notification Center:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landskap")
 } else {
 print("Portrett")
 }
}

3. Webutvikling (HTML, CSS, JavaScript)

I webutvikling kan du bruke CSS medieforespørsler (media queries) og JavaScript for å håndtere endringer i skjermorientering.

a. CSS medieforespørsler

Medieforespørsler lar deg bruke forskjellige stiler basert på skjermstørrelse, orientering og andre egenskaper. Du kan bruke orientation-mediefunksjonen for å målrette spesifikke orienteringer.

/* Portrettorientering */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Landskapsorientering */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Du kan bruke medieforespørsler til å justere layout, fonter og andre stiler basert på orienteringen.

b. JavaScript

Du kan bruke JavaScript til å oppdage endringer i skjermorientering og utføre egendefinerte handlinger. screen.orientation-APIet gir informasjon om den nåværende orienteringen.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landskap");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrett");
 } else {
 console.log("Ukjent orientering");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternativt kan du bruke matchMedia-APIet med medieforespørsler:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landskap");
 } else {
 console.log("Portrett");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript kan brukes til å dynamisk justere layouten, laste inn forskjellige ressurser eller utføre andre handlinger basert på orienteringen.

c. Rammeverk for responsivt design

Rammeverk som Bootstrap, Foundation og Materialize CSS gir innebygd støtte for responsivt design, noe som gjør det enklere å lage layouter som tilpasser seg forskjellige skjermstørrelser og orienteringer. Disse rammeverkene bruker vanligvis et rutenettsystem og medieforespørsler for å lage fleksible og responsive brukergrensesnitt.

Beste praksis for håndtering av skjermorientering

Her er noen beste praksiser du bør huske på når du håndterer endringer i skjermorientering:

• Unngå unødvendig gjenoppretting av Activity/ViewController: Hvis mulig, håndter konfigurasjonsendringen selv for å unngå overbelastningen ved å gjenopprette aktiviteten eller view controlleren.
• Lagre og gjenopprett tilstand: Lagre og gjenopprett alltid aktivitetens/view controllerens tilstand for å forhindre tap av data. Bruk ViewModels for mer robust tilstandshåndtering.
• Bruk Auto Layout eller ConstraintLayout: Disse layout-systemene gjør det enklere å lage fleksible og adaptive layouter.
• Test på flere enheter: Test applikasjonen din på en rekke enheter med forskjellige skjermstørrelser og orienteringer for å sikre at den fungerer korrekt.
• Vurder tilgjengelighet: Sørg for at applikasjonen din forblir tilgjengelig for brukere med nedsatt funksjonsevne når skjermen roterer.
• Gi klare visuelle signaler: Hvis brukergrensesnittet endres betydelig når skjermen roterer, gi klare visuelle signaler for å hjelpe brukerne med å forstå endringene.
• Unngå å tvinge en spesifikk orientering (med mindre det er nødvendig): La brukere bruke enheten sin i den orienteringen de foretrekker når det er mulig. Å tvinge en orientering kan være frustrerende og upraktisk. Lås bare orienteringen hvis det er avgjørende for applikasjonens funksjonalitet (f.eks. et spill som krever landskapsmodus). Hvis du låser orienteringen, kommuniser årsaken tydelig til brukeren.
• Optimaliser for ytelse: Minimer mengden arbeid som må gjøres når skjermen roterer for å unngå ytelsesproblemer.
• Bruk relative enheter: Når du definerer størrelser og posisjoner i layouten din, bruk relative enheter (f.eks. prosent, dp, sp) i stedet for absolutte enheter (f.eks. piksler) for å sikre at brukergrensesnittet skalerer riktig på forskjellige skjermstørrelser.
• Utnytt eksisterende biblioteker og rammeverk: Dra nytte av eksisterende biblioteker og rammeverk som gir støtte for responsivt design og håndtering av skjermorientering.

Orienteringslås og brukeropplevelse

Selv om det generelt er best å la brukere rotere enhetene sine fritt, finnes det situasjoner der du kanskje vil låse skjermorienteringen. For eksempel kan en videoavspiller i fullskjerm låse orienteringen til landskapsmodus for optimal visning.

Det er imidlertid viktig å bruke orienteringslås med måte og å gi en klar grunn til brukeren. Å tvinge en orientering kan være frustrerende og kan gjøre applikasjonen din mindre tilgjengelig.

Hvordan låse skjermorientering

Android

Du kan låse skjermorienteringen i Android ved å sette screenOrientation-attributtet i AndroidManifest.xml-filen:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Du kan også låse orienteringen programmatisk:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

I iOS kan du spesifisere de støttede orienteringene i Info.plist-filen. Du kan også overstyre supportedInterfaceOrientations-metoden i din view controller:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globale betraktninger

Når du designer for et globalt publikum, husk følgende angående skjermorientering:

• Høyre-til-venstre (RTL) layouter: Vurder hvordan brukergrensesnittet ditt vil tilpasse seg RTL-språk. Noen språk, som arabisk og hebraisk, skrives fra høyre til venstre. Sørg for at layouten din speiles korrekt i RTL-modus. Auto Layout og ConstraintLayout gir ofte innebygd støtte for RTL-layouter.
• Kulturelle preferanser: Vær oppmerksom på kulturelle preferanser knyttet til enhetsbruk. Selv om de fleste brukere er vant til både portrett- og landskapsmodus, kan noen kulturer ha subtile preferanser. Testing med brukere fra forskjellige regioner kan gi verdifull innsikt.
• Tilgjengelighet for ulike brukere: Prioriter alltid tilgjengelighet. Sørg for at applikasjonen din er brukbar for personer med nedsatt funksjonsevne, uavhengig av skjermorientering. Dette inkluderer å tilby alternativ tekst for bilder, sikre tilstrekkelig fargekontrast og støtte hjelpeteknologier.

Testing av håndtering av skjermorientering

Grundig testing er avgjørende for å sikre at applikasjonen din håndterer endringer i skjermorientering korrekt. Her er noen tips for testing:

• Bruk emulatorer og ekte enheter: Test applikasjonen din på både emulatorer og ekte enheter for å dekke et bredere spekter av skjermstørrelser og maskinvarekonfigurasjoner.
• Test i forskjellige orienteringer: Test applikasjonen din i både portrett- og landskapsorientering, samt omvendt portrett og omvendt landskap hvis det støttes.
• Test med forskjellige skjermstørrelser: Test applikasjonen din på enheter med forskjellige skjermstørrelser for å sikre at brukergrensesnittet skalerer riktig.
• Test med forskjellige skriftstørrelser: Test applikasjonen din med forskjellige skriftstørrelser for å sikre at teksten forblir lesbar.
• Test med tilgjengelighetsfunksjoner aktivert: Test applikasjonen din med tilgjengelighetsfunksjoner som skjermlesere aktivert for å sikre at den forblir tilgjengelig for brukere med nedsatt funksjonsevne.
• Automatisert testing: Implementer automatiserte UI-tester som dekker endringer i skjermorientering. Dette kan hjelpe med å fange opp regresjoner og sikre konsekvent oppførsel på tvers av utgivelser.

Konklusjon

Å håndtere skjermorientering effektivt er et kritisk aspekt ved mobil- og webutvikling. Ved å forstå de forskjellige teknikkene som er tilgjengelige på hver plattform og følge beste praksis, kan du lage applikasjoner som gir en sømløs og hyggelig brukeropplevelse, uansett hvordan brukeren holder enheten sin. Husk å prioritere testing og vurdere de globale implikasjonene av designvalgene dine for å sikre at applikasjonen din er tilgjengelig og brukervennlig for et mangfoldig publikum.